<template>
  <div class="hello">
    <!-- 头部 -->
    <div class="head">
      <img src="../../public/img/logo.png" alt="" />
      <span><a href="">卧室系列</a></span>
      <span><a href="">客厅系列</a></span>
      <span><a href="">餐厅系列</a></span>
    </div>

    <!-- 轮播图 -->
    <div
      id="demo"
      class="carousel slide"
      data-ride="carousel"
      style="height: 250px"
    >
      <!-- 指示符 -->
      <ul class="carousel-indicators">
        <li data-target="#demo" data-slide-to="0" class="active"></li>
        <li data-target="#demo" data-slide-to="1"></li>
        <li data-target="#demo" data-slide-to="2"></li>
      </ul>

      <!-- 轮播图片 -->
      <div class="carousel-inner" style="height: 100%">
        <div
          v-for="(val, key) in lunBo"
          :key="key"
          class="carousel-item"
          :class="`val ${key === 0 ? 'active' : ''}`"
          style="height: 100%"
        >
          <img :src="val.lunImg" style="height: 100%" />
        </div>
      </div>
    </div>

    <!-- 展示台 -->
    <section>
      <!-- 新品上市  3个展台 -->
      <div class="xin">
        <div class="left" v-for="(val, key) in zhanTai" :key="key">
          <a href="">
            <img :src="val.zhanSrc" alt="" />
            <span>{{ val.zhanTitle }}</span>
          </a>
        </div>
      </div>
    </section>
    <!-- 新品上市 -->
    <main>
      <div class="new">
        <div class="left">
          <img src="../../public/img/4.jpg" alt="" />
        </div>
        <div class="right">
          <div>
            <p class="p1">新品上市</p>
            <p class="p2">NEW</p>
          </div>
          <img src="../../public/img/5.jpg" alt="" />
        </div>
      </div>
      <!-- 四个产品 -->
      <div class="produce">
        <!-- 上 -->
        <div class="top" v-for="(val, key1) in xinPin" :key="key1">
          <!-- 左边 -->
          <div
            class="left"
            v-for="(value, key2) in val.shangShi"
            :key="key2"
            @click="yemian(key1, key2)"
          >
            <router-link to="/xiang">
              <div>
                <img :src="value.xinSrc" alt="" />
              </div>
              <div>
                <p>{{ value.xinTitle }}</p>
                <span class="jia">{{ value.xinMoney }}</span>
                <span class="iconfont icon-jiarugouwuche gouWu"></span>
              </div>
            </router-link>
          </div>
        </div>
      </div>
    </main>

    <!-- 热卖产品 -->
    <main class="main1">
      <!-- 大图 -->
      <div class="da">
        <img src="../../public/img/10.jpg" alt="展示图" />
      </div>

      <!-- 头部看点 -->
      <div class="new">
        <div class="right new_right">
          <div>
            <p class="p1">热卖产品</p>
            <p class="p2">HOT</p>
            <p class="p3">品质与艺术</p>
          </div>
        </div>
        <div class="middle">
          <img src="../../public/img/11.jpg" alt="" />
        </div>
        <div class="left new_left">
          <img src="../../public/img/12.jpg" alt="" />
        </div>
      </div>
      <!-- 四个产品 -->
      <div class="produce">
        <!-- 上 -->
        <div class="top" v-for="(val, key1) in xinPin" :key="key1">
          <!-- 左边 -->
          <div
            class="left"
            v-for="(value, key2) in val.shangShi"
            :key="key2"
            @click="yemian(key1, key2)"
          >
            <router-link to="/xiang">
              <div>
                <img :src="value.xinSrc" alt="" />
              </div>

              <div>
                <p>{{ value.xinTitle }}</p>
                <span class="jia">{{ value.xinMoney }}</span>
                <span class="iconfont icon-jiarugouwuche gouWu"></span>
              </div>
            </router-link>
          </div>
        </div>
      </div>
    </main>

    <!-- 底部信息 -->
    <footer>
      <div>
        <span>店铺信息</span>
        <div class="xian"></div>
      </div>
    </footer>

    <!-- 两个图标 -->
    <div class="top_tu" v-show="top" @click="shang">
      <span></span>
    </div>
    <div class="ke">
      <router-link to="/gou">
        <span class="iconfont icon-shengdangouwuche"></span>
      </router-link>
    </div>
    <div class="gou">
      <router-link to="">
        <span class="iconfont icon-kefu"></span>
      </router-link>
    </div>
  </div>
</template>

<script>
import "../../public/css/home.css";
import "../../public/font/font_ray6b1apenn/iconfont.css";
import $ from "jquery";
import bus from "@/bus.js";

export default {
  data() {
    return {
      lunBo: [],
      zhanTai: [],
      xinPin: [],
      top: false,
    };
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll, true);
    $(".carousel").carousel({
      interval: 2000,
    });

    // 获取数据
    this.$axios
      .get("http://47.114.130.21:3002/index")
      .then((data) => {
        // console.log(data.data[0]);
        // console.log(data.status);
        // console.log(data);
        // console.log(data.data[0].lunBo);
        if (data.status == 200) {
          this.lunBo = JSON.parse(data.data[0].lunBo);
          this.zhanTai = JSON.parse(data.data[0].zhanTai);
          this.xinPin = JSON.parse(data.data[0].xinPin);
        }
      })
      .catch((err) => {
        console.log(err);
      });
  },
  methods: {
    yemian(id1, id2) {
      if (localStorage.getItem("username") == null) {
        this.$router.push({ path: "/reg" });
      } else {
        // 第一种
        setTimeout(() => {
          bus.$emit("myHeader", {
            src: this.xinPin[id1].shangShi[id2].xinSrc,
            title: this.xinPin[id1].shangShi[id2].xinTitle,
            money: this.xinPin[id1].shangShi[id2].xinMoney,
          });
        }, 200);
      }
    },
    handleScroll() {
      var top = Math.floor(
        document.body.scrollTop ||
          document.documentElement.scrollTop ||
          window.pageYOffset
      );
      // 向上的图标显示
      if (top > 50) {
        this.top = true;
      } else {
        this.top = false;
      }
    },
    shang() {
      // 置顶
      //返回顶部
      $("html").animate(
        {
          scrollTop: 0,
        },
        500,
        "linear"
      );
      /* setInterval(function(){
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
        window.pageYOffset = 0;
      },5000) */
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
</style>
